<template>
    <page-wrap>
        <template #extension>
            <div class="cm-order-header">
                <div class="cm-order-header-info">
                    <div class="cm-order-header-left">
                        <span class="cm-order-header__label">桌号：</span>
                        <span class="cm-order-header__value cm-orange">{{ cartStore.tableInfo.roomName }}</span>
                    </div>
                    <div class="cm-order-header-right">
                        <div class="cm-order-header__tag">服务员：{{ cartStore.tableInfo.waiterUserName }}</div>
                    </div>
                </div>
            </div>
            <z-search placeholder="请输入您要搜索的商品" @update:model-value="onQuery"></z-search>
        </template>
        <div class="order-container">
            <z-sidebar :current-active="menuActive" :menu-list="configStore.productList" @click="onSidebar" />
            <div class="order-content-wrapper" ref="scrollContainer" @scroll="onScroll">
                <div class="cm-order-group" v-for="group, groupIndex in configStore.productList" :key="groupIndex">
                    <div class="cm-order-group-heading">
                        <div class="cm-order-group-title">{{ group.name }}</div>
                    </div>
                    <div class="cm-order-group-listbox">
                        <ul class="cm-order-group-list">
                            <li class="cm-order-group-item" v-for="item, index in group.children" :key="index">
                                    <!-- 过滤掉已下架商品 -->
                                <div class="item-dish" v-if="!(!item.priceList.some(v => v.isEstmClear == '0' && v.state == '1') && item.priceList.some(v => v.state == '0'))"> 
                                    <div class="item-dish-left">
                                        <img class="dish-left-img"  @click="openPreview(item.attachment)"  v-lazy="item.attachment" @error="$event.target.src = defutImage" />
                                        <div class="dish-left-over"
                                                v-if="!item.priceList.some(v => v.isEstmClear == '0' && v.state == '1') && item.priceList.some(v => v.state == '0')">
                                                <div class="dish-left-over__text">已下架</div>
                                        </div>
                                        <div class="dish-left-over"
                                                v-if="item.priceList.every((v) => v.state == '1') && item.priceList.every((v) => v.isEstmClear == '1')">
                                                <div class="dish-left-over__text">已沽清</div>
                                        </div>
                                        <img v-if="item.isUseGold == '1'" class="jinbi-img"
                                                src="https://oss.jtmckj.com/wmp/qnjg/signin/jinbi-h5.png" alt="">
                                    </div>
                                    <div class="item-dish-right">
                                        <div class="right-top">{{ item.goodsName }}</div>
                                        <!-- <div class="right-center"></div> -->
                                         <div style="display: flex;">
                                            <div class="right-bottom-left" :class="{'ch-right-bottom-left':['0024', '0025'].includes(ls.get('ORG_CODE')) }" >
                                                <div class="left-title"><div class="left-icon"></div> <div class="left-title-size">星际会员</div></div>
                                                <div v-if="ls.get('ORG_CODE') == '0024' || ls.get('ORG_CODE') == '0025'" class="left-value qnjqleft-value" :class="{'ch-left-value':['0024', '0025'].includes(ls.get('ORG_CODE')) }"><div class="left-value-icon">￥</div>{{ formatNumber(item.vipPrice) }}</div>
                                                <div v-else class="left-value left-value-old"><div class="left-value-icon">￥</div>{{ formatNumber(item.vipPrice) }}</div>
                                        </div>
                                         </div>
                                        
                                        <!-- <div class="right-price"><span class="icon">￥</span>{{ formatNumber(item.salePrice) }}</div> -->
                                        <div class="right-bottom">
                                            <!-- <div class="right-bottom-left">
                                                <div class="left-title">权益会员价</div>
                                                <div class="left-value">{{ formatNumber(item.vipPrice) }}</div>
                                            </div> -->
                                            <div class="right-price" :class="{'ch-right-price':['0024', '0025'].includes(ls.get('ORG_CODE')) }"><span class="icon">￥</span>{{ formatNumber(item.salePrice) }}</div>
                                            <div class="right-bottom-right">
                                                <van-badge :content="item.showNum" :max='99' :showZero="false"
                                                    class="cm-van-badge" v-if="!(item.type == 1 && item.priceList.length == 1 && !item.goodsFlavor)">
                                                </van-badge>

                                                <div :class="{ 'cm-order-group__multiple': true, 'disabled': !item.priceList.some(v => v.isEstmClear == '0' && v.state != '0') }"
                                                    v-if="item.type == 2" @click="onHandleOrder('combo', item)">选套餐</div>
                                                <div :class="{ 'cm-order-group__multiple': true, 'disabled': !item.priceList.some(v => v.isEstmClear == '0' && v.state != '0') }"
                                                    v-if="(item.type == 1 && item.priceList.length > 1) || (item.type == 1 && item.goodsFlavor)"
                                                    @click="onHandleOrder('size', item)">选规格</div>
                                                <div class="cm-order-group__single"
                                                    v-if="item.type == 1 && item.priceList.length == 1 && !item.goodsFlavor " >
                                                    <z-stepper :min="0" v-model="item.num"
                                                        :show-minus="item.num == 0 ? false : true"
                                                        :show-input="item.num == 0 ? false : true"
                                                        :step="(item.num < item.saleLimitMin && item.saleLimitMin >= item.saleLimitStep) ? item.saleLimitMin : item.saleLimitStep"
                                                        :max="item.saleLimitMax"
                                                        :disabled="!item.priceList.some(v => v.isEstmClear == '0' && v.state != '0')"
                                                        disable-input @plus="onHandleOrder('plus', item)"
                                                        @minus="onHandleOrder('minus', item)" />
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="cm-order-footer">
                <div class="cm-order-footer-car" @click="onShowCart">
                    <van-badge :content="cartStore.totalCount" :max='99' :showZero="false" class="cm-van-badge">
                    </van-badge>
                    <img class="cm-order-footer__icon" :src="img_icon_car">
                </div>
                <div class="cm-order-footer-info">
                    <div class="info-price"><div class="info-price-icon">￥</div>{{ formatNumber(cartStore.totalAmount) }}</div>
                    <div class="info-center">
                        <div class="info-center-top">会员价{{ formatNumber(cartStore.totalVipAmount) }}元</div>
                        <div class="info-center-bottom">共{{ cartStore.totalCount }}件</div>
                        <!-- <div class="info-center-" ></div> -->
                    </div>
                    <!-- <div class="info-right">会员价{{ formatNumber(cartStore.totalVipAmount) }}元</div> -->
                    <!-- <div class="cm-order-footer__money">
                        <span class="cm-order-footer__rmb">￥</span>
                        <span class="cm-order-footer__num">{{ formatNumber(cartStore.totalAmount) }}</span>
                    </div>
                    <div class="cm-order-footer__quantity">共{{ cartStore.totalCount }}件</div> -->
                </div>
                <div class="cm-order-footer__control">
                    <div class="control-btn" bold @click="onSubmit" v-if="cartStore.totalCount">去结算</div>
                    <div class="control-btn" bold disabled v-else>去结算</div>
                </div>
            </div>
        </template>
    </page-wrap>
    <!-- 规格选择 -->
    <SizeSelect v-model:show="sizeSelectShow" :data="sizeData" v-if="sizeSelectShow" @join="onJoinSize"></SizeSelect>
    <!-- 套餐弹窗 -->
    <ComboSelect v-model:show="comboSelectShow" :data="comboData" @join="onJoinCombo"></ComboSelect>
    <!-- 购物车弹窗 -->
    <Cart v-model:show="cartShow"></Cart>
    <z-popup 
        v-model:show="previewVisible"
        width="60%"
        class="sel-dialog"
        @close="handleClosePreview">
      <img 
        :src="previewImage" 
        alt="Preview Image" 
        class="preview-image" 
        style="width: 100%; height: auto;"
      />
    </z-popup>
</template>
<script setup>
import useConfigStore from '@/store/config'
import useCartStore from '@/store/cart'
import { transformArrayProps, formatNumber } from '@/lib/util.js'
import { showToast } from 'vant';
import v_search_white from '@/assets/svg/common/v_search_white.svg'
import img_icon_car from '@/assets/images/common/i_icon_car2.png'
import _ from 'lodash'
import ls from '@/lib/ls'


//图片加载失败显示的默认图片
const defutImage = ref('https://oss.jtmckj.com/wmp/qnjg/signin/defutImage.png')
const router = useRouter()
const configStore = useConfigStore()
const cartStore = useCartStore()
const menuActive = ref(0);
// type 0单品 1多规格单品 2套餐
const productList = ref([])
const allProductList = ref([])

const totalCount = ref(cartStore.totalCount)

const previewVisible = ref(false)
const previewImage = ref('')
// 图片预览
const openPreview = (imageUrl)=> {
      previewImage.value = imageUrl; // 设置要预览的图片
      previewVisible.value = true;  // 显示预览弹窗
}
    // 关闭图片预览弹窗
const handleClosePreview = ()=> {
      previewVisible.value = false; // 关闭预览弹窗
}

// 选套餐
const comboSelectShow = ref(false)
const onJoinCombo = (product) => {
    cartStore.RefreshCart(product)
}

// 选规格
const sizeSelectShow = ref(false)
const onJoinSize = (product) => {
    // cartStore.RefreshCart(product)
}

// 购物车
const cartShow = ref(false)
// 监听购物车商品变化
watch(cartStore.cartList, (nVal) => {
    // 回填productList
    for (const product of configStore.productList) {
        for (const childItem of product.children) {
            childItem.showNum = 0;
        }
    }
    for (const cartItem of cartStore.cartList) {
        const { goodsCode, goodsType } = cartItem;
        const productItem = configStore.productList.find(item => item.code === goodsType);
        if (productItem) {
            for (const childItem of productItem.children) {
                if (childItem.goodsCode === goodsCode) {
                    childItem.showNum += cartItem.num;
                }
            }
        }
    }
    for (const productItem of configStore.productList) {
        const { code } = productItem;
        const cartItems = cartStore.cartList.filter(item => item.goodsType === code);
        productItem.badge = cartItems.reduce((sum, item) => sum + item.num, 0);
    }
    // 回填allProductList
    for (const product of configStore.allProductList) {
        for (const childItem of product.children) {
            childItem.showNum = 0;
        }
    }
    for (const cartItem of cartStore.cartList) {
        const { goodsCode, goodsType } = cartItem;
        const productItem = configStore.allProductList.find(item => item.code === goodsType);
        if (productItem) {
            for (const childItem of productItem.children) {
                if (childItem.goodsCode === goodsCode) {
                    childItem.showNum += cartItem.num;
                }
            }
        }
    }
    for (const productItem of configStore.allProductList) {
        const { code } = productItem;
        const cartItems = cartStore.cartList.filter(item => item.goodsType === code);
        productItem.badge = cartItems.reduce((sum, item) => sum + item.num, 0);
    }
    console.log(configStore.productList);
    // 购物车没商品情况下，关闭弹窗
    if (unref(cartShow) && !nVal.length) {
        cartShow.value = false
    }
}, { deep: true })

const sizeData = ref({})
const comboData = ref({})
const onHandleOrder = function (type, item) {
    // isEstmClear  1沽清  state 1 上架 0 下架
    if (!item.priceList.some(v => v.isEstmClear == '0' && v.state != '0')) return
    switch (type) {
        case 'combo':
            console.log(item);
            
            const detail = item.priceList[0].detail
            console.log(detail);
            for (let i = 0; i < detail.length; i++) {
                const goodsDetail = detail[i].goodsDetail;
                detail[i].allNum = 0
                for (let j = 0; j < goodsDetail.length; j++) {
                    const flavor = goodsDetail[j];
                    flavor.isShowFlavor = true // 是否显示规格
                    flavor.flavor = '' // 已选规格
                    flavor.canPlus = false // 步进器是否可加
                    flavor.stepNum = flavor.defaultQty // 步进器数量
                    flavor.percentPrice = 0
                    flavor.vipPercentPrice = 0
                    flavor.isSelect = false // 是否选中
                    flavor.choiceType = detail[i].choiceType
                    flavor.operType = detail[i].operType
                    // flavor.stepNum = '' 
                    // console.log(flavor.goodsFlavor);
                    if(flavor.goodsFlavor){
                        if(flavor.goodsFlavor.includes('[')){
                            flavor.goodsFlavor = JSON.parse(flavor.goodsFlavor)
                        }
                        for (let item of flavor.goodsFlavor) {
                            item.active = false
                            if(typeof item.FlavorStr == 'string'){
                        
                                const str = item.FlavorStr;
            
                                // 替换中文逗号为英文逗号
                                const normalizedStr = str.replace(/[，,]/g, ',');
                                // 使用英文逗号分隔字符串
                                const parts = normalizedStr.split(',');
                                // 将每个部分转换为对象
                                const result = parts.map(part => {
                                    // 默认值
                                    let uomName = part.trim();
                                    let addprice = 0;
                                    let select = false;
                                    // 检查是否有#，设置select
                                    if (uomName.includes('#')) {
                                        select = true;
                                        uomName = uomName.replace('#', '').trim();
                                    }
                                    // 检查是否有*，设置addprice
                                    const match = uomName.match(/\*(\d+)$/);
                                    if (match) {
                                        addprice = parseInt(match[1], 10);
                                        uomName = uomName.replace(match[0], '').trim();
                                    }
                                    return { uomName, addprice, select };
                                });
                                console.log(result);
                                
                                item.sizeList = result
                                
                            }
                        }
                        console.log(flavor.goodsFlavor);
                        
                    }
                    
                }
            }
            comboData.value = item
            comboSelectShow.value = true
            break;
        case 'size':
            const basicList = []
            basicList.push({
                type: "1",
                active: 0,
                title: '单位',
                isMultiple: '0',
                sizeList: item.priceList
            })
            console.log(basicList);
            let flavourList = []
            console.log(item);
            if (item.goodsFlavor) {
                flavourList = JSON.parse(item.goodsFlavor).map((v) => {
                    console.log(v.FlavorStr);
                    const flavourArr = [v.FlavorStr];
                    console.log(flavourArr);
                    return {
                        type: "2",
                        active: v.IsMultiple == 1 ? [0] : 0,
                        title: v.Name,
                        isMultiple: v.IsMultiple,
                        sizeList: flavourArr,
                    };
                });
            }
            const arr = basicList.concat(flavourList)
            console.log(arr);
            sizeData.value = {
                priceList: item.priceList,
                type: item.type,
                goodsType: item.goodsType,
                attachment: item.attachment,
                sizeGroup: arr
            }
            sizeData.value.sizeGroup.forEach((v, k) => {
                    console.log(v.sizeList);
                    
                    let list = v.sizeList
                    if(typeof list[0] == 'string'){
                        
                        const str = list[0];
    
                        // 替换中文逗号为英文逗号
                        const normalizedStr = str.replace(/[，,]/g, ',');
                        // 使用英文逗号分隔字符串
                        const parts = normalizedStr.split(',');
                        // 将每个部分转换为对象
                        const result = parts.map(part => {
                            // 默认值
                            let uomName = part.trim();
                            let addprice = 0;
                            let select = false;
                            // 检查是否有#，设置select
                            if (uomName.includes('#')) {
                                select = true;
                                uomName = uomName.replace('#', '').trim();
                            }
                            // 检查是否有*，设置addprice
                            const match = uomName.match(/\*(\d+)$/);
                            if (match) {
                                addprice = parseInt(match[1], 10);
                                uomName = uomName.replace(match[0], '').trim();
                            }
                            return { uomName, addprice, select };
                        });
                        console.log(result);
                        
                        v.sizeList = result
                        list = result
                        
                    }
                    let arr = []
                    list.forEach((vi,ki)=>{
                        if(vi.select){
                            arr.push(ki)
                        }
                    })
                    
                    if(arr.length == 1){
                        v.active = (v.isMultiple == 1 ? arr : arr[0])
                    }else if(arr.length > 1){
                        v.active = arr
                    }
                    
                })
                console.log(sizeData);
                
            sizeSelectShow.value = true
            break;
        case 'plus':
        case 'minus':
            const product = {
                mathType: type,
                type: item.type,
                num: item.num,
                attachment: item.attachment,
                flavor: '',
                goodsType: item.goodsType,
                ...item.priceList[0]
            }
            console.log(product);
            cartStore.RefreshCart(product)
            if(type == 'minus'){
                if(product.num - Number(product.saleLimitStep) < Number(product.saleLimitMin)){
                    item.num = 0
                }
            }
            
            break;
    }
}

function parseGoodsFlavor(flavor) {
    // 获取 flavor.goodsFlavor
    let goodsFlavor = flavor.goodsFlavor;

    // 判断是否是字符串类型
    if (typeof goodsFlavor === "string") {
        try {
            // 尝试解析成 JSON 数组
            let parsedArray = JSON.parse(goodsFlavor);
            
            // 判断解析结果是否是一个数组
            if (Array.isArray(parsedArray)) {
                return parsedArray;  // 是 JSON 数组，返回解析后的数组
            } else {
                console.warn("JSON解析成功，但解析结果不是数组。");
                return goodsFlavor;  // 如果解析后不是数组，直接返回原始字符串
            }
        } catch (error) {
            console.error("解析失败：", error);
            return goodsFlavor;  // 如果 JSON 解析失败，返回原始字符串
        }
    } else if (Array.isArray(goodsFlavor)) {
        // 如果不是字符串，而是一个普通数组，直接返回
        return goodsFlavor;
    } else {
        console.warn("goodsFlavor 既不是字符串也不是数组。");
        return goodsFlavor;  // 如果既不是字符串也不是数组，返回原始值
    }
}

const onShowCart = function () {
    if (!cartStore.cartList.length) return
    cartShow.value = !unref(cartShow)
}

// 去下单
const onSubmit = function () {
    
    router.push({
        path: '/open/orderConfirm?canOrder',
        query: {
            canOrder: 1
        }
    })
}
// 商品被沽清后 刷新商品
watch(configStore.isGoodChange,(newValue,oldValue)=>{
    onInit()
  
})

// 搜索商品
const onQuery = function (val) {
    const matchingItems = [];
    configStore.allProductList.forEach((item) => {
        const clonedItem = { ...item }; // 克隆原始对象
        const children = item.children;
        console.log(children);
        
        const matchingChildren = children.filter((child) => child.goodsName.includes(val) || child.shortName.includes(val));
        if (matchingChildren.length === 0) {
            return null;
        }
        clonedItem.children = matchingChildren;
        matchingItems.push(clonedItem);
    });
    configStore.productList = matchingItems
}

const updateProductList = (cartList, productList) => {
    // 清空
    for (const product of configStore.productList) {
        for (const childItem of product.children) {
            childItem.num = 0;
        }
    }
    for (const cartItem of cartList) {
        const { goodsCode, goodsType, num, uomCode } = cartItem;

        const product = productList.find((product) => product.code === goodsType);

        if (product) {
            const childProduct = product.children.find(
                (child) => child.goodsCode === goodsCode
            );

            if (
                childProduct &&
                childProduct.type === "0" &&
                childProduct.goodsFlavor === ""
            ) {
                childProduct.num += num;
            }
        }
    }
}

// 初始化
const onInit = () => {
    const trans = [
        ['goodsTypeName', 'name'],
        ['goodsTypeCode', 'code'],
        ['goodsList', 'list']
    ]
    const parent = transformArrayProps(configStore.categoryList, trans)
    console.log(parent);
    const child = configStore.goodsList;
    const arr = [];
    for (let i = 0; i < parent.length; i++) {
        const code = parent[i].code;
        const matchingObjects = child.filter(obj => {
            let types = obj.goodsType.split(',');
            return types.includes(code);
        });
        // console.log(matchingObjects);
        const newObject = { code: parent[i].code, name: parent[i].name, badge: 0, children: [] };
        if (matchingObjects.length > 0) {
            matchingObjects.forEach(obj => {
                console.log(obj.priceList);
                if(obj.priceList){
                    obj.priceList.forEach((vi,ki)=>{
                        if(!vi.saleLimitMin || vi.saleLimitMin == '0'){
                                vi.saleLimitMin = 0
                        }
                        if(!vi.saleLimitStep || vi.saleLimitStep == '0'){
                                vi.saleLimitStep = 1
                        }
                        if(!vi.saleLimitMax || vi.saleLimitMax == '0'){
                                vi.saleLimitMax = 99999
                        }
                    })
                }
                // const newObj = { ...obj, num: 0, showNum: 0 }; // 添加 num 属性并设置为 0
               
                const newObj = { ...obj, num: 0, showNum: 0,
                                        saleLimitMin:obj.priceList[0].saleLimitMin?obj.priceList[0].saleLimitMin:0, // 最小点单数量
                                        saleLimitStep:obj.priceList[0].saleLimitStep?obj.priceList[0].saleLimitStep:1, // 每次加商品的数量
                                        saleLimitMax:(!obj.priceList[0].saleLimitMax || obj.priceList[0].saleLimitMax == '0')?99999:obj.priceList[0].saleLimitMax, // 每次点单的最大数量
                                    }; // 添加 num 属性并设置为 0
                newObject.children.push(newObj);
            });
            arr.push(newObject);
        }
    }
    arr.forEach(item => {
        if (item.children && item.children.length > 0) {
            item.children.forEach(child => {
                child.isUseGold = child.isUseGold || "0"
                child.priceList.forEach(price => {
                    if (price.isUseGold == "1") {
                        child.isUseGold = "1"
                    }
                })
            });
        }
    });
    configStore.productList = arr;
    configStore.allProductList = arr
    console.log('configStore.productList :>> ', configStore.productList);
    // 获取桌台购物车
    cartStore.GetTableCart()
    updateProductList(cartStore.cartList, configStore.productList);
    updateProductList(cartStore.cartList, configStore.allProductList);
    console.log(configStore.productList);
    console.log( configStore.allProductList);

}
onInit()

// 滚动联动
const scrollContainer = ref(null)
const onScroll = function () {
    const parentRect = unref(scrollContainer).getBoundingClientRect();
    // 获取所有锚点元素
    const navContents = document.querySelectorAll('.order-content-wrapper .cm-order-group')
    // 所有锚点元素的 offsetTop
    const offsetTopArr = []
    navContents.forEach((item) => {
        const childRect = item.offsetTop;
        const distance = Math.round(item.offsetTop - parentRect.top);
        offsetTopArr.push(distance);
    })
    // 获取当前文档流的 scrollTop
    const scrollTop = unref(scrollContainer).scrollTop
    // 定义当前点亮的导航下标
    let navIndex = 0
    for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是 n 了
        if (scrollTop >= offsetTopArr[n]) {
            navIndex = n
        }
    }
    menuActive.value = navIndex
}
const onSidebar = function (code, k) {
    // console.log(code,k)
    const parentRect = unref(scrollContainer).getBoundingClientRect();
    // 获取目标的 offsetTop
    // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
    const childRect = document.querySelector(`.order-content-wrapper .cm-order-group:nth-child(${k + 1})`)
    const distance = childRect.offsetTop - parentRect.top;
    const targetOffsetTop = Math.round(distance)
    scrollContainer.value.scrollTop = targetOffsetTop
}
</script>
<style scoped lang="scss">
.order-container {
    display: flex;
    height: 100%;
    overflow: hidden;

    .order-content-wrapper {
        padding: 0 11px;
        flex: 1;
        overflow-y: auto;

    }
}
.cm-order-group-title{
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 12px;
    color: #999999;
    line-height: 12px;
}

.cm-order-footer{
    background: #F2E2C2;
    border-radius: 20px;
    .info-center-top{
        color: #FF6A00;
    }
    .info-center-bottom{
        color: #666666;
    }
    .cm-van-badge.van-badge{
    background-color: #FFAA00;
    color: #212121;
}
    .info-price{
        color: #212121;
        display: flex;
        align-items: flex-end;
        .info-price-icon{
            font-family: PingFang SC;
            font-weight: 800;
            font-size: 10px;
            color: #212121;
            line-height: 10px;
            padding-bottom: 12px;
        }
    }
    .control-btn{
        background: #FFAA00;
        border-radius: 20px;
    }
}
.cm-order-group__cover {
    .cm-order-group_img {
        position: relative;
        width: 100%;
        height: 120px;
        border-radius: 8px 8px 0px 0;
    }
    .jinbi-img {
        position: absolute;
        right: 0px;
        width: 24px;
        height: 12px;
        float: right;
        opacity: 0.8;
    }
}
.item-dish{
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    background-color: #17171a;
    padding-bottom: 10px;
    border-bottom: 1px solid #0B0B0D;
    box-shadow: 0 1px 0 0 #222226;
    // justify-content: ;
    .item-dish-left{
        width: 100px;
        height: 100px;
        position: relative;
        .dish-left-img{
            width: 100px;
            height: 100px;
            border-radius: 4px;
        }
        .dish-left-over{
            width: 100px;
            height: 100px;
            background: #000000;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;
            .dish-left-over__text{
                width: 60px;
                height: 30px;
                border-radius: 4px;
                border: 1px solid rgba($color: #FFFFFF, $alpha: 0.2);
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 24px;
            }
        }
        .jinbi-img{
            position: absolute;
            bottom: 0;
            right: 0;
            color: #666666;
            width: 24px;
            height: 12px;
            background: #292933;
            border-radius: 4px 0px 3px 0px;
            opacity: 0.8;
        }
        
    }
    .item-dish-right{
        width: 100%;
        height: 100px;
        padding-left: 8px;
        position: relative;
        .right-top{
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 14px;
            padding-bottom: 8px;
            word-break: break-all;
            white-space: normal;
            margin-top: 10px;
        }
        .right-center{
            display: flex;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 12px;
            color: #999999;
            line-height: 12px;
            padding-bottom: 7px;
            word-break: break-all;
            white-space: normal;
        }
        .right-bottom-left{
                // width: 110px;
                height: 18px;
                border-radius: 2px;
                border: 1px solid #666666;
                margin-top:7px;
                display: flex;
                .left-icon{
                    position: absolute;
                    left: 2px;
                    top: 3px;
                    width: 12px;
                    height: 10px;
                    background-image: url('@/assets/images/common/i_icon_vip.png');
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
                .left-title{
                    width: 55px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 10px;
                    color: #212121;
                    line-height: 14px;
                    background: linear-gradient(90deg, #EFC38D, #F7DDAC);
                    border-radius: 2px 0px 0px 2px;
                    text-align: right;
                    padding-right: 2px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    .left-title-size{
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 11px;
                        color: #1A0D00;
                        line-height: 12px;
                        transform: scale(0.8333); /* 缩放到 10px (10/12 ≈ 0.8333) */
                        transform-origin: right; /* 确保缩放从左侧开始 */
                    }
                    
                    
                }
              
                .left-value{
                    // width: 60px;
                    width: 80px;
                    font-size: 10px;
                    color: #FFFFFF;
                    background-color: #404040;
                    text-align: center;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 10px;
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    padding-bottom: 3px;
                    .left-value-icon{
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 7px;
                        color: #FFFFFF;
                        line-height: 7px;
                        // transform: scale(0.7); /* 缩放到 10px (10/12 ≈ 0.8333) */
                        // transform-origin: right; /* 确保缩放从左侧开始 */
                    }
                }
                .left-value-old {
                    width: 60px;
                }
            }
            .ch-right-bottom-left {
                height: 21px;
                .left-title {
                    width: 75px;
                    justify-content: start;
                }
                .left-title-size {
                    font-size: 14px !important;
                    margin-left: 10px;
                }
                .left-icon {
                    top: 4px;
                    width: 15px;
                    height: 13px;
                  
                }
                .ch-left-value {
                    line-height: 15px;
                    font-size: 18px;
                    width: 90px !important;
                }
            }


        .right-bottom{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            // position: absolute;
            width: 100%;
            bottom: 0;
            padding-right: 12px;
            margin-top: 10px;

            .right-price{
            font-family: PingFang SC;
            font-weight: 800;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 18px;
            padding-bottom: 5px;
            .icon{
                font-size: 12px;
            }
            }
            
            .right-bottom-right{
               
            }
        }
        .ch-right-price {
                font-size: 16px !important;
                .icon {
                    font-size: 10px !important;
                }
            }
    }
}
::v-deep(.van-stepper__minus:before){
    background: #212121 !important;
}
::v-deep(.van-stepper__minus:after){
    background: #212121 !important;
}
::v-deep(.van-stepper__minus){
    background: #FFAA00 !important;
}
::v-deep(.van-stepper__plus:before){
    background: #212121 !important;
}
::v-deep(.van-stepper__plus:after){
    background: #212121 !important;
}
::v-deep(.van-stepper__plus){
    background: #FFAA00 !important;
}
::v-deep(.z-sidebar){
    width: 64px !important;
}
.qnjqleft-value {
    flex: 1;
    font-size: 16px !important;
}
</style>